<template>
  <div>
    <!--卡片视图区域-->
    <el-card>
      <!--查询条件表单区域-->
      <el-row>
        <el-form label-position="left" :inline="true" :model="queryForm">
          <el-col :xs="20" :sm="16" :md="12" :lg="8" :xl="4">
            <el-form-item label="课程名称" size="small">
              <el-select v-model="queryForm.name" placeholder="课程名称" size="small">
                <el-option v-for="course in courseList"
                           :key="course.courseId"
                           :label="course.courseName"
                           :value="course.courseId"
                           size="small">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2">
            <el-button type="primary" @click="queryExp(queryForm.name)" size="small">查询</el-button>
          </el-col>
        </el-form>
      </el-row>
      <!--表格数据区域-->
      <el-row>
        <el-table :data="experimentList" border stripe>
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column prop="experId" label="实验编号" width="80px"></el-table-column>
          <el-table-column prop="experName" label="实验名称"></el-table-column>
          <!--          <el-table-column prop="courseName" label="对应课程名称"></el-table-column>-->
          <el-table-column prop="difficuty" label="实验难度" width="80px">
            <template v-slot:default="scope">
              <div v-if="scope.row.difficuty === undefined ">
              </div>
              <el-tag type="success" v-if=" scope.row.difficuty === 1">
                基础
              </el-tag>
              <el-tag v-if="scope.row.difficuty === 2">
                提高
              </el-tag>
              <el-tag type="warning" v-if="scope.row.difficuty === 3">
                综合
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="reportTemplate" label="实验模板">
            <template v-slot:default="scope">
              <div v-if="scope.row.reportTemplate === undefined || scope.row.reportTemplate === null ||
              scope.row.reportTemplate === ''">
                暂未发布模板
              </div>
              <div v-if=" scope.row.reportTemplate !== null && scope.row.reportTemplate !== ''">
                <el-link :href="scope.row.reportTemplate" type="primary" size="small">下载模板</el-link>
              </div>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-upload
                :action="templateUploadUrl"
                :data="scope.row"
                :headers="headers"
                :before-upload="beforeUpload"
                :on-success="onSuccess"
                :on-error="onError"
                :show-file-list="false"
                multiple
                :limit="1"
                :file-list="fileList">
                <el-tooltip effect="dark" content="上传模板" placement="top" :enterable="false">
                  <el-button icon="el-icon-upload2" size="small" :disabled="scope.row.reportTemplate !== undefined
                  && scope.row.reportTemplate !== null && scope.row.reportTemplate !== ''" type="primary"></el-button>
                </el-tooltip>
              </el-upload>
              <el-tooltip effect="dark" content="删除模板" placement="top"
                          :enterable="false">
                <el-button @click="deleteTemplate(scope.row)" type="danger"
                           icon="el-icon-delete"
                           :disabled="scope.row.reportTemplate === undefined || scope.row.reportTemplate === null ||
              scope.row.reportTemplate === ''"
                           size="small"></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // url
      fileList: [],
      // templateUploadUrl: 'http://127.0.0.1:8088/uploadReportTemplate',
      templateUploadUrl: 'http://139.196.238.103:10084/uploadReportTemplate',
      // 查询条件表单
      queryForm: {
        name: ''
      },
      defaultCourse: '',
      courseList: [],
      // 筛选后的list
      filterExperimentList: [],
      total: '',
      // 从后端接收的数据
      experimentList: [],
      // 表单宽度
      formLabelWidth: '100px',
      // 上传文件同时携带token
      headers: {
        Authorization: window.sessionStorage.getItem('token')
      },
      query: {
        courseName: ''
      }
    }
  },
  async created () {
    await this.getCourseId()
    this.queryForm.name = this.defaultCourse
    await this.queryExp(this.defaultCourse)
  },
  methods: {
    async getCourseId () {
      // 获取课程id列表
      const { data: res2 } = await this.$http.post('/queryTeacherCourseList')
        .catch((error) => {
          console.log(error)
          this.$message.error('接口请求失败')
        })
      if (res2.status !== 200) this.$message.error('获取课程信息失败')
      this.courseList = res2.data.data
      this.defaultCourse = this.courseList[0].courseId
    },
    async queryExp (courseId) {
      const { data: res } = await this.$http.post('/queryTeacherExperiment', { courseId: courseId })
        .catch((error) => {
          console.log(error)
          this.$message.error('网络连接超时')
        })
      if (res.status !== 200) this.$message.error('获取实验列表失败')
      this.experimentList = res.data.data
      console.log(this.experimentList)
      if (this.experimentList.length > 0) {
        this.$message.success(`查询到${this.experimentList.length}个实验`)
      } else {
        this.$message.info('没有查询到实验')
      }
    },
    async deleteTemplate (template) {
      const flag = await this.$confirm('确认要删除吗？')
      if (flag) {
        // console.log(course)
        const { data: res } = await this.$http.post('/deleteReportTemplate', template)
          .catch((error) => {
            console.log(error)
            this.$message.error('删除模板失败,请检查网络')
          })
        if (res.status === 200) {
          this.$message.success('删除模板成功')
          // console.log(this)
          await this.queryExp(this.queryForm.name)
        } else {
          this.$message.error('删除模板失败,' + res.data.msg)
        }
      }
    },
    // 文件上传相关函数
    beforeUpload () {
      return this.$confirm('确定要上传吗')
    },
    async onSuccess (response) {
      this.$message.success('模板发布成功')
      // console.log(response)
      await this.queryExp(this.queryForm.name)
    },
    onError (err) {
      this.$message.error('文件上传失败')
      console.log(err)
    }
  }
}
</script>

<style scoped>

</style>
